<template>
  <div>
    <van-nav-bar
      title="订单详情"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-contact-card
      :type="address"
      :name="currentContact.name"
      :tel="currentContact.tel"
      @click="onEdit"
    />
    <div class="content">
      <van-card
        v-for="item in items.items"
        :key="item.id"
        :num="item.num"
        :price="item.price"
        :desc="item.description"
        :title="item.title"
        :thumb="item.cover_url"
      />
      <van-submit-bar :price="total" button-text="支付"> </van-submit-bar>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'order',
  data () {
    return {
      currentContact: {
        name: '',
        tel: ''
      },
      type: ''
    }
  },
  created () {},
  methods: {
    onClickLeft () {
      this.$router.push('/cart')
    },
    onEdit () {
      this.$router.push('/contactlist')
    }
  },
  computed: {
    ...mapState({
      items: (state) => JSON.parse(JSON.stringify(state.Order.data))
    }),
    total () {
      return this.items.items.reduce((p, v) => {
        return (p += v.price * v.num * 100)
      }, 0)
    },
    address () {
      if (this.$store.state.Address.data.length) {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.currentContact = this.$store.state.Order.data.contact
        return 'edit'
      } else {
        return 'add'
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  margin-bottom: 50px;
}
</style>
